<template>
  <el-card class="box-card">
    <div slot="header"
         class="clearfix">
      <span>试题录入</span>
    </div>

    <el-form label-width="120px">
      <el-form-item label="学科：">
        <el-select v-model="formData.subjectID"
                   placeholder="请选择"
                   size="small"
                   style="width: 50%">
          <el-option v-for="item in subject"
                     :key="item.id"
                     :label="item.subjectName"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="目录：">
        <el-select v-model="formData.catalogID"
                   placeholder="请选择"
                   size="small"
                   style="width: 50%">
          <el-option v-for="item in catalogList"
                     :key="item.id"
                     :label="item.directoryName"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="企业：">
        <el-select v-model="formData.enterpriseID"
                   placeholder="请选择"
                   size="small"
                   style="width: 50%">
          <el-option v-for="item in companyList"
                     :key="item.id"
                     :label="item.shortName"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="方向：">
        <el-select v-model="formData.direction"
                   placeholder="请选择"
                   size="small"
                   style="width: 50%">
          <el-option v-for="item,index in directionList"
                     :key="index"
                     :label="item"
                     :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="题型：">
        <el-radio-group v-model="formData.questionType">
          <el-radio :label="'1'">单选</el-radio>
          <el-radio :label="'2'">多选</el-radio>
          <el-radio :label="'3'">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度：">
        <el-radio-group v-model="formData.difficulty">
          <el-radio :label="'1'">简单</el-radio>
          <el-radio :label="'2'">一般</el-radio>
          <el-radio :label="'3'">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干：">
        <!-- 使用 v-model 进行双向的数据绑定 -->
        <quill-editor v-model="formData.question" />
      </el-form-item>
      <el-form-item v-if="formData.questionType==='1'"
                    label="选项：">
        <!-- 单选题 -->
        <div class="only">
          <div class="options">
            <el-radio v-model="code"
                      label="A">A:
              <el-input v-model="titles[0].title"
                        placeholder="" />
            </el-radio>
          </div>
          <div class="options">
            <el-radio v-model="code"
                      label="B">B:
              <el-input v-model="titles[1].title"
                        placeholder="" />
            </el-radio>
          </div>
          <div class="options">
            <el-radio v-model="code"
                      label="C">C:
              <el-input v-model="titles[2].title"
                        placeholder="" />
            </el-radio>
          </div>
          <div class="options">
            <el-radio v-model="code"
                      label="D">D:
              <el-input v-model="titles[3].title"
                        placeholder="" />
            </el-radio>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="formData.questionType==='2'"
                    label="选项：">
        <!-- 多选题 -->
        <div class="more">
          <el-checkbox-group ref="checkboxGroupRef"
                             v-model="checkList">
            <el-checkbox label="A">A:
              <el-input v-model="titles[0].title"
                        placeholder="" />
            </el-checkbox>
            <el-checkbox label="B">B:
              <el-input v-model="titles[1].title"
                        placeholder="" />
            </el-checkbox>
            <el-checkbox label="C">C:
              <el-input v-model="titles[2].title"
                        placeholder="" />
            </el-checkbox>
            <el-checkbox label="D">D:
              <el-input v-model="titles[3].title"
                        placeholder="" />
            </el-checkbox>

          </el-checkbox-group>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button v-if="formData.questionType!=='3'"
                   type="danger"
                   :disabled="formData.questionType==='1'">增加选项和答案</el-button>
      </el-form-item>
      <el-form-item label="解析：">
        <el-input v-model="formData.videoURL" />
      </el-form-item>
      <el-form-item label="答案解析：">
        <!-- 使用 v-model 进行双向的数据绑定 -->
        <quill-editor v-model="formData.answer" />
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="formData.remarks"
                  type="textarea"
                  style="width:50%" />
      </el-form-item>
      <el-form-item label="试题标签">
        <el-input v-model="formData.tags"
                  placeholder=""
                  style="width: 50%" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAddQues">确定提交</el-button>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<script>
import { getSubjectListAPI, getDirectoryListAPI } from '@/api/subject'
import { addQUestionAPI, getQuesDetailAPI, updateQuestionAPI } from '@/api/questions-list'
import { getCompanyListAPI } from '@/api/company-list'
export default {
  name: 'SubjectsNewView',
  data () {
    return {
      // 表单对象
      formData: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        city: '历下区',
        province: '济南市',
        options: [],

        remarks: '',
        videoURL: '',
        answer: '',
        tags: ''
      },
      // 学錒列表
      subject: [],
      // 目录列表
      catalogList: [],
      // 企业列表
      companyList: [],
      directionList: ['o2o', '外包服务', '企业服务', '互联网金融', '企业咨询', '互联网', '电子商务', '其他'],
      // 多选题
      checkList: [],
      // 单选code
      code: '',
      // 单选输入框
      titles: [
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        },
        {
          title: ''
        }

      ]

    }
  },
  watch: {
    formData: {
      async handler (val) {
        if (val.subjectID) {
          const res = await getDirectoryListAPI(val.subjectID)
          // console.log(res)
          this.catalogList = res.items
        }
      },
      deep: true
    }
  },
  async created () {
    this.getSubjectList()
    this.getCompanyList()

    if (this.$route.query.id) {
      const res = await getQuesDetailAPI(this.$route.query.id)
      // console.log(res)
      this.formData = res
      this.formData.options.forEach((item, index) => {
        this.titles[index].title = item.title
        if (res.questionType === '2') {
          if (item.isRight) {
            this.checkList.push(item.code)
          }
        } else if (res.questionType === '1') {
          if (item.isRight) {
            this.code = item.code
          }
        }
      })
    }
  },
  methods: {
    // 获取学科列表
    async getSubjectList () {
      const res = await getSubjectListAPI()
      // console.log(res)
      this.subject = res.items
    },
    // 获取企业列表
    async getCompanyList () {
      const res = await getCompanyListAPI({ pagesize: 1000 })
      // console.log(res)
      this.companyList = res.items
    },
    // 添加基础题库
    async handleAddQues () {
      // 多选题
      if (this.formData.questionType === '2') {
        const arr = []
        const a = ['A', 'B', 'C', 'D']
        a.forEach((item, index) => {
          if (this.checkList.includes(item)) {
            arr.push({
              isRight: true,
              code: item,
              title: this.titles[index].title
            })
          } else {
            arr.push({
              isRight: false,
              code: item,
              title: this.titles[index].title
            })
          }
        })
        this.formData.options = arr
      }
      // 单选题
      if (this.formData.questionType === '1') {
        const arr = []
        const a = ['A', 'B', 'C', 'D']
        a.forEach((item, index) => {
          if (item !== this.code) {
            arr.push({
              isRight: false,
              code: item,
              title: this.titles[index].title
            })
          } else {
            arr.push({
              isRight: true,
              code: item,
              title: this.titles[index].title
            })
          }
        })
        this.formData.options = arr
      }
      // 判断是否为修改
      if (this.$route.query.id) {
        await updateQuestionAPI(this.$route.query.id, this.formData)
        this.$message.success('修改题库成功')
        this.$router.push('/questions/list')
        return
      }
      await addQUestionAPI(this.formData)
      // console.log(res)
      this.$message.success('添加基础题库成功')
      this.$router.push('/questions/list')
    }
    // 增加选项
    /* handleAddDom () {
      console.log(this.$refs.checkboxGroupRef)
      const res = document.createElement('el-checkbox')
      console.log(res)
      console.log(this.$refs.checkboxGroupRef.$el)
      this.$refs.checkboxGroupRef.$el.appendChild(res)
      console.log(1)
    } */

  }
}
</script>

<style scoped lang="scss">
.el-card {
  ::v-deep.ql-editor {
    min-height: 200px;
  }
}

.clearfix span {
  font-size: 20px;
}
.options {
  margin-bottom: 20px;
}
.el-checkbox-group {
  display: flex;
  flex-direction: column;
  .el-checkbox {
    margin-bottom: 10px;
  }
}
</style>
